<template>
  <div>
    <van-nav-bar
      :title="'商品详情' + detailId"
      left-arrow
      fixed
      placeholder
      @click-left="goBack"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <van-image width="100%" :src="detailList.cover_url" />
    <van-card
      :num="detailList.stock"
      :price="detailList.price + '.00'"
      :desc="detailList.description"
      :title="detailList.title"
    >
      <template #tags>
        <van-tag plain type="danger">新书</van-tag>
        <van-tag plain type="danger">推荐</van-tag>
      </template>
      <template #footer>
        <van-button type="danger" @click="addShopCatr">加入购物车</van-button>
        <van-button type="warning" @click="goShopCart">立即购买</van-button>
      </template>
    </van-card>
    <van-tabs v-model:active="tabsActive" sticky offset-top="46px">
      <van-tab title="概述">
        <div v-html="detailList.details"></div>
      </van-tab>
      <van-tab title="评论">
        <div v-for="(item, index) in detailList.comments" :key="index">
          {{ item }}
        </div>
      </van-tab>
      <van-tab title="相关图书">
        <van-row class="tabs-list">
          <van-col
            span="12"
            v-for="item in likeGoods"
            :key="item.id"
            class="tab-container"
            @click="goodsClick(item.id)"
          >
            <img v-lazy="item.cover_url" alt="" />
            <div class="goods-info">
              <p>{{ item.title }}</p>
              <span class="price"><small>￥</small>{{ item.price }} </span>
              <span class="collect">
                <van-icon name="star" color="red" />{{
                  item.collects_count
                }}</span
              >
            </div>
          </van-col>
        </van-row>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { useRouter, useRoute } from 'vue-router'
import { onMounted, reactive, toRefs } from 'vue'
import { getDetailList } from '../../network/detail'
import { addCart } from '../../network/cart'
import { useStore } from 'vuex'
import { Toast } from 'vant'
export default {
  setup () {
    const router = useRouter()
    const route = useRoute()
    const store = useStore()
    const state = reactive({
      detailId: route.query.id,
      detailList: {},
      likeGoods: [],
      tabsActive: 0
    })
    onMounted(() => {
      getDetailList(state.detailId).then(res => {
        console.log(res)
        state.detailList = res.goods
        state.likeGoods = res.like_goods
      })
    })
    const addShopCatr = () => {
      addCart({ goods_id: state.detailList.id, num: 1 }).then(res => {
        if (res.status === 201 || res.status === 204) {
          Toast.success('添加成功')
          store.dispatch('storeAddcart')
        }
      })
    }
    const goShopCart = () => {
      addCart({ goods_id: state.detailList.id, num: 1 }).then(res => {
        if (res.status === 201 || res.status === 204) {
          Toast.success('添加成功，显示购物车')
          store.dispatch('storeAddcart')
        }
        router.push('/shopcart')
      })
    }
    const goBack = () => {
      router.go(-1)
    }
    const goodsClick = (id) => {
      router.push({ path: '/detail', query: { id } })
    }
    return {
      ...toRefs(state),
      goBack,
      goodsClick,
      addShopCatr,
      goShopCart
    }
  }
}
</script>
<style scoped lang="less">
.van-card {
  text-align: left;
}
.tab-container {
  position: relative;
  padding-bottom: 35px;
  font-size: 12px;
  img {
    width: 100%;
    padding: 15px;
    border-radius: 5px;
  }
  p {
    margin-bottom: 5px;
  }
}
.goods-info {
  position: absolute;
  bottom: 5px;
  width: 100%;
}
.price {
  margin-right: 10px;
  color: red;
}
</style>
